這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !
系統提示：「If winter comes , can spring be far behind ?--P. B. Shelley」，PixiJS青銅玩家還卡關於自定義function階段，僅獲得經驗提昇等級。
abc分別是apply()、bind()、call()，雖然說apply()、call()要綁在一起講，順序有點不對，但是這樣對我來說比較好記（常常忘記他們的名稱）
所以這次的任務就是要從自定義函數keyboard中來認識abc家族（？）
function keyboard(keyCode) {
var key = {};
key.code = keyCode;
key.isDown = false;
key.isUp = true;
key.press = undefined;
key.release = undefined;
//The `downHandler`
key.downHandler = function(event) {
if (event.keyCode === key.code) {
if (key.isUp && key.press) key.press();
key.isDown = true;
key.isUp = false;
}
event.preventDefault();
};
//The `upHandler`
key.upHandler = function(event) {
if (event.keyCode === key.code) {
if (key.isDown && key.release) key.release();
key.isDown = false;
key.isUp = true;
}
event.preventDefault();
};
//Attach event listeners
window.addEventListener(
"keydown", key.downHandler.bind(key), false
);
window.addEventListener(
"keyup", key.upHandler.bind(key), false
);
return key;
}
主要是以下這個部份，因此想了解下bind()，也連帶順便認識一下apply()、call()：
window.addEventListener(
"keydown", key.downHandler.bind(key), false
);
window.addEventListener(
"keyup", key.upHandler.bind(key), false
);
＊＊＊
先來看看MDN以及ECMAScript上對於this的解釋：
感覺上this就是一個很靈活的小東西，在不同情況下，他可以指向不同的值。
而apply()、call()、bind()這三個函式都是用來改變this指向的對象，或者說可以綁定this指向的對象。
＊＊＊
所以我想從this綁定開始寫起，其他應該先不會研究。
關於this的綁定，有四種方法：
至於apply()、call()、bind()被歸類在明確綁定的部份，其他可能只會簡單的先帶過。
＊＊＊
1. 預設綁定
person()
2. 隱含綁定
指向：用來呼叫該函數的物件
舉例：
結果如下
可以從上方執行的函式觀察到，最後執行的兩段程式差異性：
person1.whatYourName();
sayYourName();
第一段：我們利用物件person1的屬性來呼叫sayYourName()，此時的this指向的是「呼叫該函數的物件」，也就是person1。
所以當執行sayYourName()裡面的console.log後，印出來的this.name就會是person1中的name。
第二段：直接執行sayYourName()，此時的this指向的是全域，但是全域中沒有name屬性啊，所以得到的就會是"undefine"。
3. 明確綁定
apply()、call()、bind()的參數apply() & call()
這兩個一起講，因為太相似了。
call()
this指向的內容、後面的參數則依序為function test的參數a,b,c所要帶入的內容。
apply()
call()一樣，第一個參數傳入this要指向的對象，不同的是傳入function test的參數方式，apply()是利用陣列來作為參數傳入。call()都是一樣的
bind()
我們先看下面這段程式碼：
印出的結果為
直接執行func()得到結果為"undefined"的原因，是因為執行func()時，this指向的會是全域（這跟我們呼叫的方法有關），所以就會想是不是有辦法讓我們可以設立一個函數，不管怎麼呼叫，他的this都不會改變，於是bind()就誕生了！
此時利用bind()，將sayYourName()裡面的this與person1綁在一起，因此當我需要this.name時，他就會去找person1中的屬性name了，並且把他儲存成一個函數，之後我們就可以直接使用這個函數，也不必擔心this出什麼差錯，而指向不如我們預期的東西。
對了，還是印出一下結果
＊＊＊
怕命名上有點混淆，所以這邊改一下上方範例：
印出結果如下
4. new運算子綁定
apply()、call()、bind()，所以這裡就...不繼續寫了（加上我沒時間了QAQ）＊＊＊
回到Treasure Hunter Game
window.addEventListener(
"keydown", key.downHandler.bind(key), false
);
當"keydown"被觸發時，則執行key.downHandler.bind(key)，而他這邊做的事情就是把key物件中的屬性downHandler()中的this指向綁定到key本身身上，如此一來downHandler()這個函式就可以取用key物件中的屬性去使用。
從物件導向概念、this概念，再到apply()、call()、bind()，今天花了大概5個小時的時間不間斷的去理解，幸好有生出來（不然就白蹺課了），也把一直有點逃避的內容給理解起來，儘管還是很不熟悉，但是比過去有更懂了些！
今天是用Treasure Hunter Game官方教程來寫鐵人賽的最後一天，然而鐵人賽還有4天，究竟後面幾天能不能熬過去（突然發現這好像不是能不能的問題...因為一定要撐完）
目前規劃剩下27,28,29天會分別來寫遊戲相關的擴充內容：（雖然也不保證當天有沒有辦法生出來就是了，但是會盡力！）
至於第30天當然就拿來寫心得啦¯_(ツ)_/¯
iThome鐵人賽
看影片追技術